<div>
    <h1 mat-dialog-title style="display:inline-block;cursor:move;" mat-dialog-draggable>{{'report.tags-table-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" class="dialog-close-btn">clear</mat-icon>
    <div mat-dialog-content>
        <div class="my-form-field">
            <span>{{'report.item-daterange' | translate}}</span>
            <mat-select [(value)]="data.range" style="width: 200px" [disabled]="true">
                <mat-option *ngFor="let ev of dateRangeType | enumToArray" [value]="ev.key">
                    {{ ev.value }}
                </mat-option>
            </mat-select>
        </div>
        <div class="my-form-field ml20">
            <span>{{'report.item-interval' | translate}}</span>
            <mat-select [(value)]="data.interval" style="width: 140px">
                <mat-option *ngFor="let ev of intervalType | enumToArray" [value]="ev.key">
                    {{ ev.value }}
                </mat-option>
            </mat-select>
        </div>        
        <div class="data-table my-form-field">
            <span>{{'report.tags-table-column' | translate}}</span>
            <div *ngFor="let column of columns; index as i" class="data-table-cell" matTooltip="{{column.tag.label || column.tag.name}}">
                <div class="label" [style.textAlign]="column.align">
                    {{column.label || column.tag.label || column.tag.name}}
                </div>
                <div *ngIf="i > 0" class="my-form-field mt10">
                    <span>{{'report.item-function-type' | translate}}</span>
                    <mat-select [(value)]="column.function" style="width: 110px">
                        <mat-option *ngFor="let ev of functionType | enumToArray" [value]="ev.key">
                            {{ ev.value }}
                        </mat-option>
                    </mat-select>
                </div>
                <div class="menu">
                    <mat-icon aria-label="More" [matMenuTriggerFor]="menuitem">more_vert</mat-icon>
                </div>
                <mat-menu #menuitem="matMenu">
                    <button mat-menu-item (click)="onSetLabel(i)">{{'report.tags-table-setlabel' | translate}}</button>
                    <button mat-menu-item (click)="onAddItem(i)">{{'report.tags-table-add' | translate}}</button>
                    <button mat-menu-item [matMenuTriggerFor]="menualign">{{'report.table-alignitem' | translate}}</button>
                    <mat-divider *ngIf="i > 0" class="menu-separator"></mat-divider>
                    <button *ngIf="i > 0" mat-menu-item (click)="onDeleteItem(i)">{{'report.table-delitem' | translate}}</button>
                </mat-menu>
                <mat-menu #menualign="matMenu">
                    <button mat-menu-item (click)="column.align = 'left'">
                        <div class="menu-item-select">
                            <mat-icon *ngIf="column.align === 'left'">done</mat-icon>
                            <span [ngClass]="column.align === 'left' ? '' : 'unselect'">{{'general.align-left' | translate}}</span>
                        </div>
                    </button>
                    <button mat-menu-item (click)="column.align = 'center'">
                        <div class="menu-item-select">
                            <mat-icon *ngIf="column.align === 'center'">done</mat-icon>
                            <span [ngClass]="column.align === 'center' ? '' : 'unselect'">{{'general.align-center' | translate}}</span>
                        </div>
                        
                    </button>
                    <button mat-menu-item (click)="column.align = 'right'">
                        <div class="menu-item-select">
                            <mat-icon *ngIf="column.align === 'right'">done</mat-icon>
                            <span [ngClass]="column.align === 'right' ? '' : 'unselect'">{{'general.align-right' | translate}}</span>
                        </div>
                    </button>
                </mat-menu> 
            </div>
        </div>
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" (click)="onOkClick()">{{'dlg.ok' | translate}}</button>
    </div>
</div>